<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%@include file="/common/common.jspf"%>
    <script type="text/javascript" src="${ctx}/js/qc/nc/nc_add.js">

    </script>
    <style type="text/css">
        .col-sm-3 {
            width: 15%;
            float: left;
        }

        .col-sm-9 {
            width: 35%;
            float: left;
        }

        label[class^="btn btn-default"] {
            margin-top: -4px;
        }
    </style>
</head>
<body>
<div class="l_err" style="width: 100%; margin-top: 2px;"></div>
<form id="form" name="form" class="form-horizontal" method="post"
      action="${ctx}/devicefault/devicefault_addEntity.shtml">
    <input type="hidden" value="${id}" name="deviceFaultFormMap.devicegl" id="devicegl">
    <input type="hidden" value="${deviceFaultId}" name="deviceFaultFormMap.deviceFaultId" id="deviceFaultId">
    <section class="panel panel-default">
        <div class="panel-body">
            <div class="form-group">

                <label class="col-sm-3 control-label">设备名称</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control checkabh" name="deviceFaultFormMap.deviceName" id="deviceName">
                    <%--<span class="input-group-btn">--%>
                        <span class=""></span>
						<button class="btn btn-info" type="button"
                                style="height: 34px; position: absolute; top: 0px; left: 220px;"
                                onclick="addAccount()">
							<span class="glyphicon glyphicon-search"></span>
						</button>
					<%--</span>--%>
                    <%--<input type="button" class="btn btn-default" onclick="addAccount()" style="position: absolute; top: -1px; left: 230px;" value="按钮"/>--%>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">计划名称</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control checkabh" name="deviceFaultFormMap.devicepan" id="devicepan">

                    </div>
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">计划开始时间</label>
                <div class="col-sm-9">
                    <input type="date" class="form-control checkabh" name="deviceFaultFormMap.deviceFaultDate" id="deviceFaultDate">
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">计划结束时间</label>
                    <div class="col-sm-9">
                        <input type="date" class="form-control checkabh" name="deviceFaultFormMap.deviceend" id="deviceend">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">周期类型</label>
                <div class="col-sm-9">
                    <select class="form-control" name="deviceFaultFormMap.devicecycletype" id="devicecycletype" >
                        <option value="日">日</option>
                        <option value="周">周</option>
                        <option value="月">月</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">周期</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control checkabh" name="deviceFaultFormMap.devicecycle" id="devicecycle">
                    </div>
                </div>
            </div>

            <!-- 开始处理清单 -->
            <div id = "deviceInfo">
                <%--隐藏的数据，用于向后台传递panel下标列表--%>
                <input type="text" style="display:none;"  name="panelNum" id="panelNum">
                <%--<div class="panel panel-default">--%>
                    <%--<div class="panel-heading">--%>
                        <%--<h3 class="panel-title">保养部位</h3>--%>
                    <%--</div>--%>
                    <%--<div class="panel-body">--%>
                        <%--<table class="table table-bordered" >--%>
                            <%--<thead>--%>
                            <%--<tr>--%>
                                <%--<th style="text-align: center; width:135px;">所属部位</th>--%>
                                <%--<th style="text-align: center; width:135px;">保养描述</th>--%>
                                <%--<th><input type="button" class="btn btn-primary" onclick="insert_row(this)" value="增加"></th>--%>
                            <%--</tr>--%>
                            <%--</thead>--%>
                            <%--<tbody id="tbl">--%>
                            <%--</tbody>--%>
                        <%--</table>--%>
                    <%--</div>--%>
                <%--</div>--%>
            </div>

        </div>
        <footer class="panel-footer text-right bg-light lter">
            <button type="submit" class="btn btn-success btn-s-xs">提交</button>
        </footer> </section>
</form>

<script type="text/javascript">
    //panel个数
    var panelNum = 0;

    //用与统计panel的下标，例如tb1的1，生成panel时放入，删除panel时取出
    var panelArr = new Array();　//创建一个数组

    //用与统计deviceId以便于去重，例如添加过的设备就无需再添加了
    var deviceIdArr = new Array();　//创建一个数组

    //用于存放设备名称，用于显示
    var deviceNameArr = new Array();　//创建一个数组


    //选中设备后执行的操作，即是在下方展示设备及关联的部位
    function inser_datas(tdArr,data){

        var deviceId = tdArr[1].innerHTML;
        var deviceName = tdArr[0].innerHTML;
        //判断是否已经添加过此设备，如没有则添加，否则提示重复并取消
        for(var i = 0; i < deviceIdArr.length;i++){
            if(deviceIdArr[i] == deviceId){
                layer.msg("此设备已添加");
                return;
            }
        }
        //如没有重复，则将此设备id放入数组中以供后续去重
        deviceIdArr.push(deviceId);


        //存放需要显示的设备名称
        deviceNameArr.push(deviceName)
        var deviceNameStr = deviceNameArr.toString();
        $("#deviceName").val(deviceNameStr);




        // 用于记录设备关联的部位下标
        var partArr = new Array();

        console.log(tdArr);
        console.log(data);

        deviceInfo = document.getElementById("deviceInfo");

        //处理设备关联的保养部位
        var htmlOne = '';
        for(var i = 0; i < data.length;i++){
            partArr.push("" + panelNum + i);//记录部位下标
            htmlOne +=  '<tr>' +
                // '<input type="text" class="form-control" name="devId' + num + '" id="ly_dev_part' + num + '">' +
                // '<input type="text" class="form-control" name="ly_dev_part' + num + '" id="ly_dev_part' + num + '">' +
                            '<td>' +
                                '<input type="text" class="form-control" name="ly_dev_part' + panelNum + i + '" id="ly_dev_part' + panelNum + i + '" value = "' + data[i].devMaintenancePartName + '">' +
                            '</td>' +
                            '<td>' +
                                '<input type="text" class="form-control" name="ly_dev_describe' + panelNum + i + '" id="ly_dev_describe' + panelNum + i + '">' +
                            '</td>' +
                            // '<td>' +
                            //     '<input type="button" class="btn btn-danger" onclick ="deleteRow(' + panelNum + ')" value ="删除">' +
                            // '</td>' +
                '</tr>';

        }


        var htmlTwo =  '<div class="panel-heading">' +
                        '<h3 class="panel-title">名称 : ' + tdArr[0].innerHTML +
                            '&nbsp;&nbsp;&nbsp;&nbsp;' +
                            '编码 : ' + tdArr[1].innerHTML +
                            '&nbsp;&nbsp;&nbsp;&nbsp;' +
                            '<span>' +
                            '<input type="button" class="btn btn-danger" onclick ="deletePanel('+ panelNum + ',\''+ deviceId + '\',\''+deviceName+'\')" value ="删除">' +
                            '<span>' +
                        '</h3>' +
                        //用于记录设备关联的部位下标
                        '<input type="text" style="display:none;" class="form-control checkabh" name="partSn' + panelNum + '" id="partSn'+ panelNum +'">' +
                        //用于记录设备的名称
                        '<input type="text" value=' + tdArr[0].innerHTML + ' style="display:none;" class="form-control checkabh" name="deviceName' + panelNum + '" id="deviceName'+ panelNum +'">' +
                        //用于记录设备的id
                        '<input type="text" value=' + tdArr[1].innerHTML + ' style="display:none;" class="form-control checkabh" name="deviceId' + panelNum + '" id="deviceId' + panelNum+ '">' +
                    '</div>' +
                    '<div class="panel-body">' +
                        '<table class="table table-bordered" >' +
                            '<thead>' +
                                '<tr>' +
                                    '<th style="text-align: center; width:135px;">所属部位</th>' +
                                    '<th style="text-align: center; width:135px;">保养描述</th>' +
                                    // '<th><input type="button" class="btn btn-primary" onclick="insert_rows(' + panelNum + ')" value="增加"></th>' +
                                '</tr>' +
                            '</thead>' +
                            '<tbody id="tb' + panelNum + '">' + htmlOne +
                            '</tbody>' +
                        '</table>' +
                    '</div>' ;


        var divNode = document.createElement('div');
        divNode.setAttribute("class","panel panel-default");
        divNode.setAttribute("id","divId" + panelNum);
        divNode.innerHTML = htmlTwo;
        deviceInfo.appendChild(divNode);

        //新增panel则将下标放入panelArr数组并写入需要传入到后台id=panelNum的隐藏标签框中
        panelArr.push(panelNum);
        var panelStr = panelArr.toString();//转为字符串，会以逗号分隔
        $("#panelNum").val(panelStr);//写入


        //将设备关联的部位下标写入需要传入到后台的隐藏文本框中
        var partStr = partArr.toString();//转为字符串，会以逗号分隔
        var partSn = document.getElementById('partSn' + panelNum);
        partSn.value = partStr;//写入

        panelNum ++;


    }

    //删除panel
    function deletePanel(obj1,obj2,obj3){
        var idNum = obj1;
        var deviceId = obj2;
        var deviceName = obj3;
        console.log(obj1,obj2);

        var divId = document.getElementById('divId' + idNum);//获取需要删除的元素
        divId.parentNode.removeChild(divId);//删除

        //删除panel下标
        for(var i = 0; i < panelArr.length;i++){
            if(panelArr[i] == idNum){
                panelArr.splice(i,1);//在数组中删除需要panel的下标
            }
        }
        var panelStr = panelArr.toString();//转为字符串，会以逗号分隔
        $("#panelNum").val(panelStr);//写入

        // console.log(deviceIdArr);
        //删除设备id
        for(var i = 0; i < deviceIdArr.length;i++){
            if(deviceIdArr[i] == deviceId){
                deviceIdArr.splice(i,1);//在数组中删除deviceId
            }
        }

        //删除设备名称
        for(var i = 0; i < deviceNameArr.length;i++){
            if(deviceNameArr[i] == deviceName){
                deviceNameArr.splice(i,1);//在数组中删除deviceName
            }
        }
        //在文本框中显示删除后的设备名
        var deviceNameStr = deviceNameArr.toString();
        $("#deviceName").val(deviceNameStr);

    }


    //添加一行设备维修描述
    function insert_row(obj) {
        i++;
        R = tbl.insertRow(tbl.rows.length);
        C = R.insertCell(0);
        C.innerHTML = '<div class="input-group"><input type="text" class="form-control" name="ly_dev_part" id="ly_dev_part'+i+'">'
            + '<span class="input-group-btn">'
            + '<span class="glyphicon glyphicon-search"></span></button></span></div>';
        C = R.insertCell(1);
        C.innerHTML = '<div class="input-group"><input type="text" class="form-control" name="ly_dev_describe" id="ly_dev_describe"></div>';
        C = R.insertCell(2);
        C.innerHTML = '<input type="button" class="btn btn-danger" onclick ="deleteRow(this)" value ="删除">';
    }




    function inser_data(data) {
        var name =  $("#deviceName").val();
        if(name==''||name==undefined||name==null ){
            $("#deviceName").val(data);
        }else {
            $("#deviceName").val(name +","+ data);
        }

    }

    var i = 0;
    function insert_row(obj) {
        i++;
        R = tbl.insertRow(tbl.rows.length);
        C = R.insertCell(0);
        C.innerHTML = '<div class="input-group"><input type="text" class="form-control" name="ly_dev_part" id="ly_dev_part'+i+'">'
            + '<span class="input-group-btn">'
            + '<span class="glyphicon glyphicon-search"></span></button></span></div>';
        C = R.insertCell(1);
        C.innerHTML = '<div class="input-group"><input type="text" class="form-control" name="ly_dev_describe" id="ly_dev_describe"></div>';
        C = R.insertCell(2);
        C.innerHTML = '<input type="button" class="btn btn-danger" onclick ="deleteRow(this)" value ="删除">';
    }

    //打开一个新页面
    function addAccount() {
        pageii = layer.open({
            title : "新增设备",
            type : 2,
            area : [ "700px", "90%" ],
            content : rootPath + '/devicefault/getDeviceInfo.shtml'
        });
    }


    function deleteRow(obj) {
        var i = obj.parentNode.parentNode.rowIndex;
        if (i > 0) {
            tbl.deleteRow(i-1);
        }
    }
</script>
</body>
</html>